﻿@using Resources;
@{
   Layout = "~/Views/Shared/Layaout/general/_LayoutMultiLine.cshtml";
}
<script type="text/javascript">
jQuery(document).ready(function(){
	$('body').layout({
		resizerClass: 'ui-state-default',
        west__onresize: function (pane, $Pane) {
            jQuery("#west-grid").jqGrid('setGridWidth',$Pane.innerWidth()-2);
		}
	});

	$.jgrid.defaults = $.extend($.jgrid.defaults, { loadui: "enable" });

	var maintab = jQuery('#tabs', '#RightPane').tabs({
	    add: function (e, ui) {
	        $(ui.tab).parents('li:first')
                .append('<span class="ui-tabs-close ui-icon ui-icon-close" title="Cierra Tab"></span>')
                .find('span.ui-tabs-close')
				.show()
                .click(function () {
                    maintab.tabs('remove', $('li', maintab).index($(this).parents('li:first')[0]));
                });
	        maintab.tabs('select', '#' + ui.panel.id);
	    }
	});
    // url: "/js/grilla/tree.xml",
	jQuery("#west-grid").jqGrid({
	    url: "/FullReporte/CreaSubMenuXml?nIdeConvo=1",
	    datatype: "xml",
	    height: "auto",
	    pager: false,
	    loadui: "disable",
	    colNames: ["id", "Items", "url"],
	    colModel: [
            { name: "id", width: 1, hidden: true, key: true },
            { name: "menu", width: 150, resizable: false, sortable: false },
            { name: "url", width: 1, hidden: true }
	    ],
	    treeGrid: true,
	    caption: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reportes Varios",
	    ExpandColumn: "menu",
	    autowidth: true,
	    rowNum: 200,
	    ExpandColClick: true,
	    treeIcons: { leaf: 'ui-icon-document-b' },
	    onSelectRow: function (rowid) {
	        var treedata = $("#west-grid").jqGrid('getRowData', rowid);
	        if (treedata.isLeaf == "true") {
	            var st = "#t" + treedata.id;
	            if ($(st).html() != null) {
	                maintab.tabs('select', st);
	            } else {
	                maintab.tabs('add', st, treedata.menu);
	                $.ajax({
	                    url: treedata.url,
	                    type: "GET",
	                    dataType: "html",
	                    complete: function (req, err) {
	                        $(st, "#tabs").append(req.responseText);	                        
	                    }
	                });
	            }
	        }
	    }
	});
});
</script>
<div id="LeftPane" class="ui-layout-west ui-widget ui-widget-content">
<table id="west-grid"></table>
</div>
 
<div id="RightPane" class="ui-layout-center ui-helper-reset ui-widget-content" >
<div id="switcher"></div>
	<div id="tabs" class="jqgtabs">
		<ul>
			<li><a href="FullReporte/ReporteCargoCab">Reporte Cargo</a></li>
		</ul>
		<div id="tabs-1" style="font-size:12px;"></div>
	</div>
</div>